<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokémon Guessing Game - Test Your Pokémon Knowledge!</title>
    <meta name="description" content="Challenge yourself with our Pokémon Guessing Game! Identify Pokémon from their silhouettes and hints. Perfect for trainers of all levels!">
    <meta name="keywords" content="pokemon game, pokemon quiz, guess the pokemon, pokemon silhouette game">
    <meta property="og:locale" content="en_US"/>
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Pokémon Guessing Game - Test Your Pokémon Knowledge!"/>
    <meta property="og:description" content="Challenge yourself with our Pokémon Guessing Game! Identify Pokémon from their silhouettes and hints. Perfect for trainers of all levels!"/>
    <meta property="og:url" content="https://pokemongenerator.xyz/guess-game"/>
    <meta property="og:image" content="/static/image.png">
    <meta property="og:site_name" content="Random Pokémon Generator"/>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Pokémon Guessing Game - Test Your Pokémon Knowledge!">
    <meta name="twitter:description" content="Challenge yourself with our Pokémon Guessing Game! Try it now!">
    <meta name="twitter:image" content="https://pokemongenerator.xyz/static/image.png">
    <link rel="canonical" href="https://pokemongenerator.xyz/guess-game"/>
    <link rel="icon" href="static/image.png" sizes="32x32"/>
    <link rel="stylesheet" href="static/base.css?version=0.0.15">
    <script type="application/javascript" src="static/base.js?ver=0.0.6"></script>
    <script type="application/javascript" src="static/data.js"></script>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-47TE63PW8V"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-47TE63PW8V');
    </script>
    <style>
        :root {
            --primary-color: #4a90e2;
            --secondary-color: #8D0B7C;
            --text-color: #333;
            --menu-text-color: #000000;
            --background-color: #ffffff;
            --header-background: #ffffff;
            --header-border-color: #e0e0e0;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
        }
        
        header {
            background-color: var(--header-background);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 10px 0;
            border-bottom: 1px solid var(--header-border-color);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .logo-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo {
            width: 40px;
            height: 40px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .logo:hover {
            transform: scale(1.1);
        }
        
        .logo-text {
            color: var(--text-color);
            font-weight: bold;
            font-size: 1em;
        }
        
        nav ul {
            list-style-type: none;
            display: flex;
            gap: 20px;
            margin: 0;
            padding: 0;
        }
        
        nav a {
            text-decoration: none;
            color: var(--menu-text-color);
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        nav a:hover {
            color: #8D0B7C !important;
            text-decoration: underline !important;
        }
        
        main {
            padding-top: 20px;
        }
        
        .game-container {
            text-align: center;
            margin-top: 40px;
        }
        
        #pokemon-silhouette {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: brightness(0);
        }
        
        #hint {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
        }
        
        #guess-input {
            margin-top: 20px;
            padding: 10px;
            font-size: 16px;
            width: 200px;
        }
        
        #submit-guess {
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        #submit-guess:hover {
            background-color: var(--secondary-color);
        }
        
        #result {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: var(--text-color);
            text-decoration: none;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        h1, .game-description {
            text-align: center;
        }
        
        .game-instructions {
            max-width: 600px;
            margin: 20px auto;
            padding: 15px;
            background-color: #f0f0f0;
            border-radius: 8px;
            text-align: left;
        }
        
        .game-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        
        .game-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            width: 160px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .game-button:hover {
            background-color: var(--secondary-color);
        }
        
        .game-button.refresh {
            background-color: #28a745;
        }
        
        .game-button.refresh:hover {
            background-color: #218838;
        }

        /* 更新移动端样式 */
        @media screen and (max-width: 768px) {
            header {
                position: relative;
                z-index: 1000;
            }

            .container {
                position: relative;
            }

            .hamburger-menu {
                display: block;
                cursor: pointer;
                z-index: 1001;
            }

            .hamburger-menu span {
                display: block;
                width: 25px;
                height: 3px;
                background-color: var(--text-color);
                margin: 5px 0;
                transition: 0.4s;
            }

            nav {
                position: static;
            }

            nav ul#menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--header-background);
                flex-direction: column;
                padding: 0;
                margin: 0;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                z-index: 999;
            }

            nav ul#menu.active {
                display: flex;
            }

            nav ul#menu li {
                text-align: center;
                padding: 15px 0;
                border-bottom: 1px solid var(--header-border-color);
            }

            nav ul#menu li:last-child {
                border-bottom: none;
            }
        }

        @media screen and (min-width: 769px) {
            .hamburger-menu {
                display: none;
            }
        }

        .options-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 20px auto;
            max-width: 600px;
            padding: 0 20px;
        }

        .option-button {
            padding: 10px;
            font-size: 16px;
            background-color: #f0f0f0;
            border: 2px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #333;
        }

        .option-button:hover {
            background-color: #e0e0e0;
            border-color: #ccc;
        }

        .option-button.selected {
            background-color: #ffeb3b;
            color: #000000;
            border-color: #ffd700;
            font-weight: bold;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }

        @media screen and (max-width: 768px) {
            .options-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo-container">
                <img src="static/image.png" alt="Random Pokémon Generator Logo" class="logo" onclick="window.location.href='/'">
                <span class="logo-text">Random Pokémon Generator</span>
            </div>
            <nav>
                <div class="hamburger-menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/name-generator">Name Generator</a></li>
                    <li><a href="/type-generator">Type Generator</a></li>
                    <li><a href="/guess-game">Pokémon Guess Game</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="container">
            <h1>Pokémon Guessing Game</h1>
            <p class="game-description">Can you identify the Pokémon from its silhouette? Test your knowledge!</p>
            
            <div class="game-instructions">
                <h3>How to Play:</h3>
                <ol>
                    <li>Look at the silhouette of the Pokémon.</li>
                    <li>Read the hint provided about its type, generation, and color.</li>
                    <li>Type your guess in the input box.</li>
                    <li>Click "Submit Guess" or press Enter to check your answer.</li>
                    <li>If you're stuck, click "Get More Hint" for additional clues.</li>
                    <li>Want a new challenge? Click "New Pokémon" to start over!</li>
                </ol>
            </div>
            
            <div class="game-container">
                <div id="pokemon-silhouette"></div>
                <div id="hint"></div>
                <div id="options-container" class="options-container">
                    <!-- 选项会通过 JavaScript 动态生成 -->
                </div>
                <div class="game-controls">
                    <button class="game-button submit-guess" disabled>Submit Answer</button>
                    <button class="game-button get-hint">Get More Hint</button>
                    <button class="game-button refresh">
                        <i class="fas fa-sync-alt"></i> New Pokémon
                    </button>
                </div>
                <div id="result"></div>
            </div>
        </div>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-links">
                <a href="https://github.com/lipengxs/PokemonGenerator.git" target="_blank" rel="noopener noreferrer">Github</a>
                <a href="/privacy-policy">Privacy Policy</a>
                <a href="/terms-of-use">Terms of Use</a>
            </div>
            <p>&copy; 2024 <strong>Random Pokemon Generator</strong>. All rights reserved.</p>
        </div>
    </footer>

    <script>
        let currentPokemon;
        let hintCount = 0;
        let selectedAnswer = null;

        function getRandomPokemon() {
            const pokemonIds = Object.keys(PokemonData);
            const randomId = pokemonIds[Math.floor(Math.random() * pokemonIds.length)];
            return {id: randomId, ...PokemonData[randomId]};
        }

        function getTypeName(typeId) {
            const type = TypeData.find(type => parseInt(type.value) === typeId);
            return type ? type.label : 'Unknown';
        }

        function getColorName(colorId) {
            const color = ColorData.find(color => parseInt(color.value) === colorId);
            return color ? color.label : 'Unknown';
        }

        function generateOptions(correctAnswer) {
            const allPokemonNames = Object.values(PokemonData).map(pokemon => pokemon.name);
            const options = new Set([correctAnswer]);
            
            // 随机选择5个错误选项
            while(options.size < 6) {
                const randomPokemon = allPokemonNames[Math.floor(Math.random() * allPokemonNames.length)];
                if (randomPokemon !== correctAnswer) {
                    options.add(randomPokemon);
                }
            }
            
            // 转换为数组并打乱顺序
            return Array.from(options).sort(() => Math.random() - 0.5);
        }

        function startNewGame() {
            currentPokemon = getRandomPokemon();
            document.getElementById('pokemon-silhouette').style.backgroundImage = 
                `url('static/pokemon/${currentPokemon.id.padStart(3, '0')}.webp')`;
            document.getElementById('pokemon-silhouette').style.filter = 'brightness(0)';
            
            const typeName = getTypeName(currentPokemon.type[0]);
            const colorName = getColorName(currentPokemon.color);
            document.getElementById('hint').innerHTML = 
                `<div style="text-align: center;">Hint: This Pokémon is a ${typeName} type from Generation ${currentPokemon.generation}. Its color is ${colorName}.</div>`;
            
            // 生成并显示选项
            const options = generateOptions(currentPokemon.name);
            const optionsContainer = document.getElementById('options-container');
            optionsContainer.innerHTML = options.map(option => 
                `<button class="option-button" data-name="${option}">${option}</button>`
            ).join('');
            
            document.getElementById('result').textContent = '';
            document.querySelector('.game-button.submit-guess').disabled = true;
            selectedAnswer = null;
            hintCount = 0;
        }

        function checkGuess() {
            if (!selectedAnswer) return;
            
            if (selectedAnswer.toLowerCase() === currentPokemon.name.toLowerCase()) {
                document.getElementById('result').textContent = 'Correct! You guessed it!';
                document.getElementById('pokemon-silhouette').style.filter = 'none';
            } else {
                document.getElementById('result').textContent = 'Sorry, that\'s not correct. Try again!';
            }
        }

        function getMoreHint() {
            hintCount++;
            let hintText = '';
            switch(hintCount) {
                case 1:
                    hintText = `This Pokémon's name starts with "${currentPokemon.name[0].toUpperCase()}"`;
                    break;
                case 2:
                    hintText = `This Pokémon has ${currentPokemon.name.length} letters in its name`;
                    break;
                case 3:
                    const secondType = currentPokemon.type[1] ? getTypeName(currentPokemon.type[1]) : "no second type";
                    hintText = `This Pokémon ${currentPokemon.type[1] ? 'also has' : 'has'} ${secondType}`;
                    break;
                default:
                    return; // 如果没有更多提示，直接返回，不做任何改变
            }
            
            const hintElement = document.getElementById('hint');
            hintElement.innerHTML += `<br><div style="text-align: center;">${hintText}</div>`;
        }

        document.addEventListener('DOMContentLoaded', function() {
            startNewGame();

            // 选项点击处理
            document.getElementById('options-container').addEventListener('click', function(e) {
                if (e.target.classList.contains('option-button')) {
                    // 移除其他选项的选中状态
                    document.querySelectorAll('.option-button').forEach(btn => 
                        btn.classList.remove('selected'));
                    
                    // 设置当前选项为选中状态
                    e.target.classList.add('selected');
                    selectedAnswer = e.target.dataset.name;
                    
                    // 启用提交按钮
                    document.querySelector('.game-button.submit-guess').disabled = false;
                }
            });

            // 保留原有的事件监听器
            document.querySelector('.game-button.submit-guess').addEventListener('click', checkGuess);
            document.querySelector('.game-button.get-hint').addEventListener('click', getMoreHint);
            document.querySelector('.game-button.refresh').addEventListener('click', startNewGame);

            // 移除原有的键盘事件监听器，因为不再需要

            // 添加移动端菜单切换功能
            const hamburgerMenu = document.querySelector('.hamburger-menu');
            const menu = document.getElementById('menu');

            if (hamburgerMenu) {
                hamburgerMenu.addEventListener('click', function() {
                    this.classList.toggle('active');
                    menu.classList.toggle('active');
                });
            }

            // 点击菜单项后关闭菜单
            menu.addEventListener('click', function(e) {
                if (e.target.tagName === 'A' && window.innerWidth <= 768) {
                    hamburgerMenu.classList.remove('active');
                    menu.classList.remove('active');
                }
            });

            // 点击页面其他地方关闭菜单
            document.addEventListener('click', function(e) {
                if (window.innerWidth <= 768 && !menu.contains(e.target) && !hamburgerMenu.contains(e.target)) {
                    hamburgerMenu.classList.remove('active');
                    menu.classList.remove('active');
                }
            });

            // 窗口大小改变时处理菜单显示
            window.addEventListener('resize', function() {
                if (window.innerWidth > 768) {
                    menu.classList.remove('active');
                    hamburgerMenu.classList.remove('active');
                }
            });
        });
    </script>
</body>
</html>
